<template>
  <svg aria-hidden="true">
    <use :xlink:href="symbolId" :class="fillClass" :fill="color" />
  </svg>
</template>

<script setup lang="ts">
import { computed } from 'vue';

const props = defineProps<{
  name?: string; // svg
  color?: string; //svg 图标颜色
  fillClass?: string; //tailwindcss 指定的 svg 颜色
}>();

// 显示真实的svg图标(拼接 #icon-)
const symbolId = computed(() => `#icon-${props.name}`);

defineOptions({ name: 'MSvgIcon' });
</script>
